<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view class="work-detail-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="true" color="#000" :topBgColor="topBgColor" title="零活详情"></CustomNav>
		<view class="info-block block" :style="'margin-top:'+mt">
			<view class="head-info">
				<view class="work-type">{{valuationText.name}}</view>
				<view class="work-name">{{detail.name}}</view>
				<view class="btn-block" style="justify-content: flex-end;">
					<image @click="collectWork" :src="collect" class="btn-item"></image>
					<!-- <image src="/static/image/report.png" class="btn-item"></image> -->
					<button open-type="share" style="margin: 0;">
						<image src="/static/image/share.png" class="btn-item"></image>
					</button>
				</view>
			</view>
			<view class="start-time">开工日期：{{detail.start_time_text}}</view>
			<view class="label-block">
				<view class="label-item">{{detail.population}}人</view>
				<view class="label-item">{{detail.duration}}{{detail.unit_text}}</view>
				<view class="price">{{detail.price}}{{detail.price_text}}</view>
			</view>
		</view>
		<view class="info-block block" style="margin: 30rpx auto;">
			<view class="title">工作地点</view>
			<view class="position-block">
				<view class="position">{{detail.address}}</view>
				<view @click="openNavigate" class="navigation">
					<view class="iconfont icon-daohang"></view>导航
				</view>
			</view>
		</view>
		<view class="info-block block">
			<view class="title">工作描述</view>
			<view class="describe">{{detail.describe}}</view>
		</view>
		<view class="info-block block" style="margin: 30rpx auto;">
			<view class="title">联系电话</view>
			<view class="contact">
				<template v-if="detail.user">
					<view class="contact-name">{{detail.user.name | filterRealName}}</view>
					<view class="contact-phone">{{detail.user.phone_number | filterPhone}}</view>
					<view @click="callPhone" class="call">
						<view class="iconfont icon-24gf-telephone"></view>拨打
					</view>
				</template>
				<view v-else class="empty">暂无联系方式</view>
			</view>
		</view>
		<view class="info-block block">
			<view class="title">工作环境及操作规范</view>
			<view class="image-block">
				<template v-if="detail.attachment.length>0">
					<image @click="viewImage(item)" v-for="(item,index) in detail.attachment" :key="index" class="image-item" mode="aspectFill" :src="item"></image>
				</template>
				<view v-else class="empty">暂无图片</view>
			</view>
		</view>
		<view @click="navigate('/page_other/department/detail?id='+detail.department.id)" class="info-block block" style="margin: 30rpx auto;display: flex;align-items: center;">
			<image :src="detail.department.logo" class="company-photo"></image>
			<view class="company-info">
				<view class="company-name">{{detail.department?detail.department.name:''}}</view>
				<view class="evaluate">用工方评分 {{detail.department.employer_score||'暂无评分'}} · 零工方评分 {{detail.department.workers_score||'暂无评分'}}</view>
			</view>
			<view class="iconfont icon-arrow-right"></view>
		</view>
		<view class="bottom-btn-block">
			<button @click="dialogToggle('error')" class="btn normal" v-if="!disabled">抢活</button>
			<!-- @click="submit" -->
			<view>
				<!-- 提示窗示例 -->
				<uni-popup ref="alertDialog" type="dialog" background-color="#fff" @change="change">
					<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="同意" title="接工须知" :content="content" @confirm="dialogConfirm"
						@close="dialogClose"></uni-popup-dialog>
				</uni-popup>
			</view>
			<view @click="navigate('/page_other/evaluate/index?type=3&associated_id='+detail.department.id+'&work_id='+detail.id+'&work_rob_id='+detail.work_rob_id)" class="btn normal" v-if="detail.process_status==2&&detail.is_comments==0">评价</view>
		</view>
		
	</view>
</template>

<script>
	import {publicWorkDetail,robWork,collectWork} from '@/api/work.js'
	import {checkLogin,checkCertificate} from '@/util/user.js'
	import {getPageDetail} from '@/api/pages.js'
	export default{
		data(){
			return{
				id:null,
				topBgColor: 'rgba(0,0,0,0)',
				detail:{
					department:{logo:'',name:''},
					name:'',
					population:0,
					duration:0,
					price:0,
					price_text:'',
					address:'',
					describe:'',
					employer_score:0,
					workers_score:0,
					start_time_text:'',
					attachment:[],
					is_collect:0,
					is_rob:0,
					is_comments:0,
				},
				disabled:false,
				
				show:false,
				msgType: 'error',
				content:'',//抢活须知
			}
		},
		computed:{
			collect(){
				return this.detail.is_collect>0?'/static/image/collect_active.png':'/static/image/collect.png'
			},
			valuationText(){
				let obj={}
				switch(this.detail.valuation){
					case 1:
						obj={name:'短期工',unit:'元/天'};
						break;
					case 2:
						obj={name:'小时工',unit:'元/时'};
						break;
					case 3:
						obj={name:'计件工',unit:'元/100件'};
						break;
					default:
						obj={name:'短期工',unit:'元/天'};
				}
				return obj
			},
		},
		methods:{
			viewImage(url){
				uni.previewImage({
					current:url,
					urls:this.detail.attachment
				})
			},
			collectWork(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				collectWork({work_id:this.detail.id,type:this.detail.is_collect>0?2:1}).then(()=>{
					this.detail.is_collect=this.detail.is_collect>0?0:1;
					this.showToast('操作成功');
				})
			},
			openNavigate(){
				uni.openLocation({
					latitude:this.detail.latitude*1,
					longitude:this.detail.longitude*1,
					name:this.detail.address
				})
			},
			callPhone(){
				uni.makePhoneCall({
					phoneNumber:this.detail.user.phone_number
				})
			},
			getDetail(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				publicWorkDetail(this.id).then(res=>{
					//res.attachment=res.attachment?res.attachment.split(','):[];
					if(res.is_rob>0)this.disabled=true
					this.detail=res;
				})
			},
			getPageDetail(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getPageDetail().then(res=>{
					this.content=res.content
				})
			},
			submit(){
				if(!checkLogin(false)){
					return;
				}
				if(!checkCertificate(false)){
					return;
				}
				if(this.disabled){
					this.showToast('请勿重复抢活');
					return;
				}
				uni.showLoading({
					title:'提交中',
					mask:true
				})
				robWork({work_id:this.detail.id}).then(()=>{
					this.disabled=true
					uni.showModal({
						title:'提示',
						content:'抢活申请已提交，请等待人力资源公司联系',
						showCancel:false,
					})
				})
			},
			
			//须知弹框
			change(e) {
				this.show = e.show
			},
			dialogToggle(msgType) {
				this.msgType = msgType
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				//console.log('点击确认')
				//this.messageText = `点击确认了 ${this.msgType} 窗口`
				//this.$refs.message.open()
				setTimeout(()=>{
					this.submit()
				},1000)
			},
			dialogClose() {
				//console.log('点击关闭')
			},
		},
		onUnload() {
			uni.$off('completeComments')
		},
		onLoad(option) {
			this.id=option.id
			this.getDetail()
			uni.$on('completeComments',()=>{
				this.getDetail();
			})
			
			this.getPageDetail()
		},
		onShareAppMessage() {
			let page=getCurrentPages()
			return{
				title:'我分享了一个零活，快来看看吧',
				path:page[page.length-1].$page.fullPath
			}
		},
	}
</script>

<style lang="scss" scoped>
	.work-detail-page {
		overflow: hidden;
	
		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}
	
		.block {
			width: $content-width;
			background: #fff;
			border-radius: 12px;
			padding: 30rpx;
		}
		.info-block{
			margin: 0 auto;
			.head-info{
				width: 100%;
				display: flex;
				.work-type{
					width: 100rpx;
					border-radius: 4px;
					color:#fa9b17;
					background: #fcf2d8;
					font-size: 24rpx;
					padding: 2px 7px;
					margin-right: 20rpx;
					text-align: center;
				}
				.work-name{
					width: calc(100% - 280rpx);
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					margin-right: auto;
					font-weight: bold;
				}
				.btn-block{
					width:160rpx;
					display: flex;
					align-items: center;
					.btn-item{
						margin: 0 10rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			.start-time{
				color: #767676;
				font-size: 28rpx;
				margin: 30rpx 0;
			}
			.label-block{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.label-item{
					border-radius: 16px;
					background: #fff0d6;
					color: $orange-color;
					font-size: 24rpx;
					padding: 8rpx 26rpx;
					margin-right: 20rpx;
				}
				.price{
					font-weight: bold;
					font-size: 28rpx;
					margin-left: auto;
					color: $orange-color;
				}
			}
			.title{
				margin-bottom: 20rpx;
			}
			.position-block{
				display: flex;
				align-items: center;
				width: 100%;
				.position{
					width: calc(100% - 140rpx);
					margin-right: 20rpx;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.navigation{
					border-radius: 16px;
					border: 1px solid #333;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120rpx;
					height: 50rpx;
					font-size: 28rpx;
					.iconfont{
						font-size: 34rpx;
					}
				}
			}
			.describe{
				line-height: 2;
			}
			.contact{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.contact-phone{
					width: 240rpx;
					margin-right: auto;
					margin-left: 20rpx;
					color: $orange-color;
				}
				.call{
					border-radius: 16px;
					border: 1px solid #333;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120rpx;
					height: 50rpx;
					font-size: 28rpx;
					.iconfont{
						font-size: 34rpx;
					}
				}
			}
			.image-block{
				display: flex;
				flex-wrap: wrap;
				.image-item{
					width: calc((100% - 60rpx)/3);
					height: 200rpx;
					border-radius: 8px;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
				}
				.image-item:nth-child(3n){
					margin-right: 0;
				}
			}
			.company-photo{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.company-info{
				width: calc(100% - 160rpx);
				display: flex;
				flex-direction: column;
				justify-content: center;
				.company-name{
					width: 100%;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.evaluate{
					color: #767676;
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}
			.icon-arrow-right{
				color: #999;
			}
		}
		.bottom-btn-block{
			display: flex;
			justify-content: center;
			margin-bottom: 30rpx;
			.btn{
				margin: 0 20rpx;
			}
		}
	}
</style>